<template>
  <div class="cost">
    <el-card>
      <!-- 填写费用 -->
      <div class="left"> 
        <el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="costDialogVisible = true">填写费用</el-button>
        <el-button type="primary" size="mini" icon="el-icon-upload">提交</el-button>
      </div>

      <!-- 费用表格 -->
      <el-table :data="tableData2" :row-class-name="tableRowClassName"
      style="width: 100%" border
      show-summary
      :summary-method="getTotal">
        <el-table-column label="序号" width="60" type="index"></el-table-column>
        <el-table-column label="项目名称" prop="name"></el-table-column>
        <el-table-column label="开标时间" prop="tiem"></el-table-column>
        <el-table-column label="支出类型[费用一]" prop="type1">
          <template slot-scope="scope">
            <span>{{scope.row.type1 | showPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支出类型[费用二]" prop="type2">
          <template slot-scope="scope">
            <span>{{scope.row.type2 | showPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支出类型[费用三]" prop="type3">
          <template slot-scope="scope">
            <span>{{scope.row.type3 | showPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支出类型[其他]" prop="type4">
          <template slot-scope="scope">
            <span>{{scope.row.type4 | showPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合计">
          <template slot-scope="scope">
            <p>{{scope.row.type1 + scope.row.type2 + scope.row.type3 + scope.row.type4}}</p>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.counm"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>

     <!-- 添加费用支出 -->
    <el-dialog
    title="费用明细"
    :visible.sync="costDialogVisible"
    width="30%">
      <el-form ref="form" :model="costForm" label-width="80px">
        <el-form-item label="费用类型1">
          <el-input v-model="costForm.type1"></el-input>
        </el-form-item>
         <el-form-item label="费用类型2">
          <el-input v-model="costForm.type2"></el-input>
        </el-form-item>
        <el-form-item label="费用类型3">
          <el-input v-model="costForm.type3"></el-input>
        </el-form-item>
        <el-form-item label="费用类型4">
          <el-input v-model="costForm.type4"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="costDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCost">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 分页
      page: {
        // 每页显示数据条数
        size: 5,
        // 当前页码值
        counm: 1,
      },
      total: 5,

      // 控制添加费用支出弹框的显示与隐藏
      costDialogVisible: false,
      // 支出明细数据
      tableData2:[
        {
          name: '国网江西省电力有限公司上饶供电分公司集体企业2020年第002批物资类招标',
          tiem: '2019-09-06',
          type1: 200.36,
          type2: 300.25,
          type3: 400.01,
          type4: 100.32,
          tiem: '2021-6-08',
        }
      ],
      // 费用明细数据
      costForm: {
        type1: '',
        type2: '',
        type3: '',
        type4: '',
      },
    }
  },
  methods: {
    // 隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },

    // 每页显示数据条数发生变化时触发
    handleSizeChange(newSize) {
      // console.log(newSize);
    },
    // 页码值发生变化时触发
    handleCurrentChange(newPage) {
      // console.log(newPage);
    },

    // 显示合计行
    getTotal(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        // console.log(column.property);
        // console.log(values);
        if(!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if(!isNaN(value)) {
              return prev + curr;
            } else {
              return prev
            }
          }, 0);
          sums[index] += '元';
        }
      });
      return sums;
    },

    // 点击填写费用弹框的确认事件
    addCost() {
      this.tableData2.push(this.costForm);
      // console.log(this.costForm);
      this.costDialogVisible = false;
      // console.log(this.tableData2);
    }
  },
  computed: {
    // 合计
    totalAmount() {
      let totalAmount = 0;
      for(let item of this.tableData2) {
        totalAmount += item.type1;
      }
      return totalAmount
    },
  },
  // 过滤器保存两位小数 
	filters: {
		showPrice(price) {
			return  price.toFixed(2);
		}
	},
}
</script>

<style scoped>
.cost{
    padding: 20px;
}
</style>